<script setup lang="ts">
import {onMounted, ref} from 'vue'
import {TipMessageTypeConst, useTipStore, StnIptProvider} from "st-ui-vue3-navie"
import {ManagerTable} from '@components'
import {useSysRoleStore} from '../stores/sys-role-store'
// import RoleSearch from '../components/RoleSearch.vue'
import RoleInfoEditor from '../components/RoleInfoEditor.vue'
import {RoleFormDefault} from '../consts/role-form-default'
import {RoleTableCols} from '../consts/role-table-cols'
import {RoleIptProps} from '../consts/role-ipt-props.ts'

// const sysRoleStore = useSysRoleStore()

// 编辑对话框显示状态
const showEditor = ref(false)
// 是否为新增
const isAdd = ref(false)
// 编辑表单数据
const editForm = ref({...RoleFormDefault})

/**
 * 新增角色
 */
const handleAdd = () => {
  isAdd.value = true
  editForm.value = {...RoleFormDefault}
  showEditor.value = true
}

/**
 * 编辑角色
 */
const handleEdit = (row) => {
  isAdd.value = false
  editForm.value = {...row}
  showEditor.value = true
}

/**
 * 关闭编辑对话框
 */
const handleEditorClose = () => {
  showEditor.value = false
}

// 组件挂载时加载数据
onMounted(async () => {
  // await sysRoleStore.getRoleDataByReq()
})
</script>

<template>
  <StnIptProvider
    class="sys-role-page w-full h-full"
    :predefined-props="RoleIptProps"
  >
    <ManagerTable
      title="角色管理"
      :columns="RoleTableCols"
      :data="useSysRoleStore().getTableData()"
      :loading="useSysRoleStore().getTableLoading()"
      :get-data-handler="useSysRoleStore().getTableDataByReq"
      :is-get-data-on-before-mount="useSysRoleStore().getTableData().length === 0"
      :add-handler="handleAdd"
    >
      <template #search>
        <!--<RoleSearch/>-->
      </template>
    </ManagerTable>
    <RoleInfoEditor
      v-model:show="showEditor"
      :form="editForm"
      :is-add="isAdd"
      :close-handler="handleEditorClose"
    />
  </StnIptProvider>
</template>
